<template>
  <div class="me">
    <v-header :title="this.$route.meta.title"></v-header>
    <div class="meMessage">
      <div class="meMessage-bj">
        <div class="bj-left">
          <img src="../../../static/img/vivo.jpg" alt="" />
        </div>

        <div class="bj-right">
          <p v-if="flag">
            <router-link to="/login"><span>登录</span></router-link>
          </p>
          <p v-else>
            <span class="uname">欢迎您：{{ name }}</span>
            <span>组名： swing</span>
          </p>
        </div>

        <div>
          <van-button
            plain
            type="info"
            @click="out"
            class="btn2"
            v-show="user.name"
            >退出账户</van-button
          >
        </div>
      </div>
    </div>
    <router-link class="meOrder" tag="div" to="/meOrder">
      <div class="meOrder-top">
        <p class="order-left">我的订单</p>
        <p class="order-right">
          全部订单 <i class="iconfont icon-youjiantou"></i>
        </p>
      </div>
      <div class="meOrder-bottom">
        <p v-for="list in order" :key="list.id">
          <img v-lazy="list.img" />
          <span>{{ list.name }}</span>
        </p>
      </div>
    </router-link>

    <div class="meMenu">
      <router-link to="/meCollection" class="con">
        <div class="con-left">
          <i class="iconfont icon-collection"></i>
          <span>我的收藏</span>
        </div>
        <div class="con-rigth">
          <i class="iconfont icon-youjiantou"></i>
        </div>
      </router-link>

      <router-link to="/meAddress" class="con">
        <div class="con-left">
          <i class="iconfont icon-shouhuodizhi"></i>
          <span>我的收货地址</span>
        </div>
        <div class="con-rigth">
          <i class="iconfont icon-youjiantou"></i>
        </div>
      </router-link>

      <router-link to="/meCart" class="con">
        <div class="con-left">
          <i class="iconfont icon-gouwuche"></i>
          <span>我的购物车</span>
        </div>
        <div class="con-rigth">
          <i class="iconfont icon-youjiantou"></i>
        </div>
      </router-link>
    </div>
    <v-footer></v-footer>
  </div>
</template>
<script>
import footer from "@/components/footer/index";
import header from "@/components/header/index.vue";
export default {
  components: {
    "v-header": header,
    "v-footer": footer,
  },
  data() {
    return {
      order: [
        {
          id: 0,
          img: require("../../../static/img/111.png"),
          name: "待付款",
        },
        {
          id: 1,
          img: require("../../../static/img/222.png"),
          name: "待收货",
        },
        {
          id: 2,
          img: require("../../../static/img/333.png"),
          name: "待评价",
        },
        {
          id: 3,
          img: require("../../../static/img/444.png"),
          name: "退货/退款",
        },
      ],
      flag: true,
      user: JSON.parse(sessionStorage.getItem("user") || "{}"),
      name: null,
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    getUser() {
      if (this.user.name) {
        this.name = this.user.name;
        this.flag = false;
      }
    },
    out() {
      this.$dialog
        .confirm({
          title: "提示",
          message: "确定要退出登录吗",
          confirmButtonColor: "red",
        })
        .then(() => {
          sessionStorage.clear();
          this.$router.push("/home");
          this.$router.go(0);
        })
        .catch(() => {
          // console.log("点击了取消");
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.me {
  background: #eee;
  .meMessage {
    margin-top: 47px;
    width: 100%;
    height: 117px;
    .meMessage-bj {
      background: url("../../../static/img/bj.png");
      width: 100%;
      height: 117px;
      background-size: 100% 100%;
      .bj-left {
        width: 26%;
        height: 100%;
        float: left;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 65%;
          height: 55%;
          border-radius: 50%;
        }
      }
      .bj-right {
        width: 60%;
        height: 100%;
        float: left;
        display: flex;
        justify-content: center;
        flex-direction: column;
        p {
          color: #fff;
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 10px;
          .uname {
            margin-bottom: 10px;
            display: block;
          }
        }
        span {
          color: #fff;
          font-size: 14px;
          margin: 0;
        }
      }
      .van-button {
        width: 95px;
        height: 30px;
        font-size: 14px;
        display: block;
        position: absolute;
        padding: 0;
        right: 10px;
        top: 95px;
      }
    }
  }
  .meOrder {
    width: 100%;
    height: 136px;
    background: white;
    display: block;
    margin-bottom: 6px;
    margin-top: 6px;
    font-size: 14px;
    .meOrder-top {
      width: 100%;
      height: 48px;
      .order-left {
        float: left;
        display: block;
        margin-left: 20px;
        font-size: 14px;
      }
      .order-right {
        float: right;
        display: block;
        // line-height: 58.5px;
        margin-right: 20px;
        font-size: 14px;
        i {
          font-size: 14px;
        }
      }
    }
    .meOrder-bottom {
      width: 100%;
      height: 58px;
      display: flex;
      justify-content: center;
      align-items: center;
      p {
        width: 25%;
        display: flex;
        flex-direction: column;
        margin-top: 12px;
        img {
          width: 31px;
          height: 31px;
          margin: auto;
          padding-top: 28px;
        }
        span {
          text-align: center;
          padding-top: 10px;
        }
      }
    }
  }
  .meMenu {
    background: #ffffff;
    .con {
      color: #000;
      width: 90%;
      height: 58.5px;
      display: flex;
      justify-content: space-between;
      margin: auto;
      .con-left {
        width: 80%;
        height: 100%;
        display: flex;
        align-items: center;
        i {
          font-size: 14px;
          margin-right: 9px;
        }
        span {
          font-size: 14px;
          padding-left: 6px;
        }
      }
      .con-rigth {
        width: 10%;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        i {
          font-size: 14px;
        }
      }
    }
  }
}
</style>
